<!DOCTYPE html>
<html>
<head>
    <title>Thin Film Interference Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        /**
         * Draws a line with an arrowhead at the end.
         * @param {CanvasRenderingContext2D} ctx - The rendering context.
         * @param {number} fromx - Starting x-coordinate.
         * @param {number} fromy - Starting y-coordinate.
         * @param {number} tox - Ending x-coordinate.
         * @param {number} toy - Ending y-coordinate.
         */
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        /**
         * Draws text with a subscript.
         * @param {CanvasRenderingContext2D} ctx - The rendering context.
         * @param {string} text - The main text.
         * @param {string} sub - The subscript text.
         * @param {number} x - The x-coordinate of the main text.
         * @param {number} y - The y-coordinate of the main text.
         */
        function drawSubscriptedText(ctx, text, sub, x, y) {
            const originalFont = ctx.font;
            const originalAlign = ctx.textAlign;
            
            ctx.textAlign = 'left';
            ctx.font = 'italic 22px Times New Roman';
            ctx.fillText(text, x, y);
            
            const textWidth = ctx.measureText(text).width;
            ctx.font = 'italic 16px Times New Roman';
            ctx.fillText(sub, x + textWidth - 2, y + 5);
            
            ctx.font = originalFont;
            ctx.textAlign = originalAlign;
        }

        // --- Main Drawing Logic ---

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.fillStyle = 'black';

        // 1. Draw Layers
        const x_start = 100, x_end = 500;
        const y_interface1 = 150; // n0-n1
        const y_interface2 = 225; // n1-n2
        const y_interface3 = 300; // n2-n3
        const y_bottom = 450;

        // Draw interfaces
        ctx.beginPath();
        ctx.moveTo(x_start, y_interface1); ctx.lineTo(x_end, y_interface1);
        ctx.moveTo(x_start, y_interface2); ctx.lineTo(x_end, y_interface2);
        ctx.moveTo(x_start, y_interface3); ctx.lineTo(x_end, y_interface3);
        ctx.stroke();

        // Draw bounding box for the substrate
        ctx.strokeRect(x_start, y_interface3, x_end - x_start, y_bottom - y_interface3);
        
        // Draw side lines for the films
        ctx.beginPath();
        ctx.moveTo(x_start, y_interface1); ctx.lineTo(x_start, y_interface3);
        ctx.moveTo(x_end, y_interface1); ctx.lineTo(x_end, y_interface3);
        ctx.stroke();

        // 2. Draw Labels
        drawSubscriptedText(ctx, 'n', '0', 120, 130);
        drawSubscriptedText(ctx, 'n', '1', 120, 200);
        drawSubscriptedText(ctx, 'n', '2', 120, 275);
        ctx.textAlign = 'center';
        drawSubscriptedText(ctx, 'n', '3', 300, 380);
        
        ctx.textAlign = 'left';
        drawSubscriptedText(ctx, 'd', '1', 515, 200);
        drawSubscriptedText(ctx, 'd', '2', 515, 275);

        // 3. Draw Rays
        const inc_x = 270, inc_y = 90;
        const hit1_x = 285, hit1_y = y_interface1;
        const hit3_x = 300, hit3_y = y_interface3;
        const up_hit1_x = 315, up_hit1_y = y_interface1;

        // Incident Ray λ
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('λ', 260, 120);
        drawArrow(ctx, inc_x, inc_y, hit1_x, hit1_y);

        // Internal paths (zig-zag)
        ctx.beginPath();
        ctx.moveTo(hit1_x, hit1_y); // Path down
        ctx.lineTo(hit3_x, hit3_y);
        ctx.moveTo(hit3_x, hit3_y); // Path up
        ctx.lineTo(up_hit1_x, up_hit1_y);
        ctx.stroke();
        
        // Arrows on the upward internal path
        drawArrow(ctx, 303.75, 262.5, 307.5, 225); // Arrow in layer n2
        drawArrow(ctx, 309, 212.5, 313.75, 162.5); // Arrow in layer n1

        // Exiting reflected rays a, b, c
        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'left';

        // Ray a
        drawArrow(ctx, 285, 150, 315, 90);
        ctx.fillText('a', 315, 90);

        // Ray b
        drawArrow(ctx, 287, 150, 330, 90);
        ctx.fillText('b', 330, 90);

        // Ray c
        drawArrow(ctx, 289, 150, 345, 90);
        ctx.fillText('c', 345, 90);

    </script>
</body>
</html>